<template>
  <vab-dialog
    v-model="dialogFormVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    show-fullscreen
    :title="title"
    width="50%"
  >
    <div class="upload">
      <!-- <el-alert
        :closable="false"
        :title="`支持jpg、jpeg、png格式，单次可最多选择${limit}张图片，每张不可大于${size}M，如果大于${size}M会自动为您过滤`"
        type="info"
      /> -->
      <el-upload
        action=""
        :auto-upload="false"
        :before-remove="beforeRemove"
        class="upload-btn"
        :file-list="fileList"
        :multiple="false"
        :on-change="handleChange"
        :on-exceed="handleExceed"
        :on-remove="handleRemove"
        :show-file-list="true"
      >
        <el-button size="small" type="primary">选择附件</el-button>
      </el-upload>
    </div>
    <template #footer>
      <div style="position: relative; padding-right: 15px; text-align: right">
        <el-button :loading="loading" type="success" @click="handleUpload">
          确认上传
        </el-button>
        <el-button type="info" @click="handleClose">关闭</el-button>
      </div>
    </template>
  </vab-dialog>
</template>

<script>
  import VabDialog from '@/plugins/VabDialog/index.vue'
  import { uploadxls, mbxls } from '@/api/mains'
  import { ElLoading } from 'element-plus'
  import { succMsg } from '@/utils/MessageUtils'

  export default defineComponent({
    name: 'VabUpload',
    components: {
      VabDialog,
    },
    props: {
      url: {
        type: String,
        default: 'attachment',
        required: true,
      },
      name: {
        type: String,
        default: 'cgdd',
        required: true,
      },
    },
    emits: {
      fetchData: null, //fetchData事件没有检验
    },
    setup(props, { emit }) {
      const { proxy } = getCurrentInstance()
      const state = reactive({
        loading: false,
        title: '上传',
        fileName: '',
        templateName: '',
        dialogFormVisible: false,
        fileList: [],
        numval: '',
      })
      const handleChange = (fileList) => {
        console.log(fileList)
        state.fileList = [fileList]
        console.log(state.fileList)
      }

      const handleUpload = async () => {
        state.loading = true
        if (state.fileList.length === 0) {
          proxy.$baseMessage('请选取文件', 'warning')
          state.loading = false
          return
        } else {
          const loading = ElLoading.service({
            lock: true,
            text: '上传中，请稍候...',
            background: 'rgba(0, 0, 0, 0.7)',
          })
          const formdata = new FormData()
          state.fileList.forEach((file) => {
            formdata.append('file', file.raw)
          })

          formdata.append('fileName', state.fileName)
          if (state.numval != undefined) {
            const { msg } = await mbxls(props.url, formdata)
            succMsg(msg)
          } else {
            formdata.append('templateName', props.name)
            const { msg } = await uploadxls(props.url, formdata)
            succMsg(msg)
          }

          state.fileList = []
          emit('fetchData')
          handleClose()
          state.loading = false
          loading.close()
        }
      }

      const handleRemove = (file, fileList) => {
        state.fileList = fileList
      }

      const handleShow = (e, val) => {
        state.title = '上传'
        state.dialogFormVisible = true
        state.fileName = e
        state.numval = val
      }
      const handleClose = () => {
        state.dialogFormVisible = false
      }

      return {
        ...toRefs(state),
        handleUpload,
        handleShow,
        handleClose,
        handleChange,
        handleRemove,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .upload {
    height: 45vh;

    .upload-content {
      .el-upload__tip {
        display: block;
        height: 30px;
        line-height: 30px;
      }

      :deep() {
        .el-upload--picture-card {
          width: 128px;
          height: 128px;
          margin: 3px 8px 8px 8px;
          border: 2px dashed #c0ccda;
        }

        .el-upload-list--picture {
          margin-bottom: 20px;
        }

        .el-upload-list--picture-card {
          .el-upload-list__item {
            width: 128px;
            height: 128px;
            margin: 3px 8px 8px 8px;
          }
        }
      }
    }
  }
  .text-left {
    padding-left: 30px;
    text-align: left;
  }
  h3 {
    padding-bottom: 20px;
  }
  .cust_btn30 {
    padding-top: 30px;
    padding-bottom: 60px;
  }
  .text_fise {
    font-size: 16px;
  }
  .text_fise > div {
    padding-bottom: 20px;
  }
</style>
